import React, { memo, useEffect } from 'react'
import { connect, shallowEqual, useDispatch, useSelector } from 'react-redux';

import { getTopBannerAction } from './store/actionCreators';

function CQRecommend(props) {
  // 组件和redux关联： 获取数据和进行操作
  // shallowEqual => 浅层比较
  const dispatch = useDispatch();
  const { topBanners } = useSelector(state => ({
    topBanners: state.recommend.topBanners
  }), shallowEqual)
  //  发送网络请求
  useEffect(() => {
    dispatch(getTopBannerAction());
  }, [dispatch])

  return (
    <div>
      {topBanners.length}
    </div>
  )
}



export default memo(CQRecommend);





// function CQRecommend(props) {
//   const { getBanners, topBanners } = props;

//   useEffect(() => {
//     getBanners();
   
//   }, [getBanners])

//   return (
//     <div>
//       {topBanners.length}
//     </div>
//   )
// }

// const mapStateToProps = state => ({
//   topBanners: state.recommend.topBanners
// })

// const mapDispatchToProps = dispatch =>({
//   getBanners: () => {
//     dispatch(getTopBannerAction())
//   }
// })

// export default connect(mapStateToProps, mapDispatchToProps)(memo(CQRecommend));
